<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个简单的表单网页</title>
    <style>
        h3 {
            margin-left: 440px;
            color: #080B6C;
            margin-bottom: 5px;
        }

        .a {
            margin-left: 450px;
            color: #C3AEE9;
            margin-bottom: 10px;
        }

        .form {
            margin: 0 auto;
            width: 700px;
        }

        input {
            width: 300px;
            margin: 5px;

        }

        .top {
            margin-left: 50px;
            margin-bottom: 10px;
        }

        #count {
            width: 100px;
        }

        .bottom {
            margin-top: 5px;
            margin-left: 5px;
        }

        .bottom button {
            box-shadow: inset 0 0 2px blue;
            background-color: #fff;
            border-radius: 18%;
            padding: 2px 8px 2px 8px;
        }

        .bottom a {
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <h3>一个简单的表单</h3>
    <a class="a">基本表单</a>
    <form action="#" onsubmit="return false;" autocomplete="on" class="form">
        <fieldset class="fieldset1">
            <legend>客户信息</legend>
            <div class="top">
                姓名：<input type="text" placeholder="输入您的名字" autofocus required><br>
                <!-- <label for="username">姓名：<input type="text" name="username" id="username" placeholder="输入您的名字" required></label><br> -->
                电话：<input type="text" placeholder="格式 1-234-567-8910" pattern="^[0-9]+$" title="格式 1-234-567-8910"
                    required><br>
                邮箱地址：<input type="email" placeholder="输入您的邮箱地址" required><br>
            </div>
        </fieldset>
        <fieldset class="fieldset2">
            <legend>书籍 </legend>
            <div class="top">
                <input list="browsers">
                <datalist id="browsers">
                    <option value="《Javascript》"></option>
                    <option value="《SQL server从入门到精通》"></option>
                    <option value="《PHP基础》"></option>
                    <option value="《H5 + CSS3响应式设计》"></option>
                </datalist>
                数量(最大为5)：<input type="number" name="" min="1" max="5" id="count">
            </div>
        </fieldset>
        <div class="bottom">
            <button type="submit">提交</button><br>
            <a>© 2011 曼联 版权所有</a>
        </div>
    </form>
</body>

</html>